<template>
  <div class="hint">
    <!-- 导航 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
      <!-- <el-breadcrumb-item >库存管理</el-breadcrumb-item> -->
      <el-breadcrumb-item :to="{ path: '/index/stock' }"
        >库存总览</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/index/mo-search' }"
        >库存查询</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/index/amend' }"
        >库存更改</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/index/addmounted' }"
        >新增商品库存</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/index/hint' }"
        >急需补货提示</el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- 标题 -->
    <h2 class="h2">以下商品请及时补货</h2>
    <h1>以下商品的库存量不足20， 请及时补货 ，以防止缺货。</h1>
    <img class="icon" src="https://iconfont.alicdn.com/p/illus/preview_image/zbZJiGxhKcGy/cc26c4e1-0b2f-488a-900e-6b9fd42ea6f1.png" alt="">
    <!-- 表格展示 -->
    <el-card>
      <el-table :data="tableData.list" style="width: 100%">
    <el-table-column fixed prop="goodsname" label="商品名称" width="150" />
    <el-table-column prop="goodsid" label="商品id" width="120" />
    <el-table-column prop="goodspreon" label="商品价格" width="120" />
    <el-table-column prop="goodsamount" label="商品库存" width="120" />
    <el-table-column prop="maxamount" label="最大库存" width="120" />
    <el-table-column prop="replenish" label="应补货量" width="120" />
    <el-table-column fixed="right" label="数据操作" width="200">
      <template #default="scope">
        <el-button link type="primary" size="small" @click.prevent="handleClick(scope.row)">编辑</el-button>
        <!-- <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button> -->
        <el-button :plain="true" @click="deleteRow(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-card>


  </div>
</template>

<script setup>
import { ref ,reactive} from 'vue';
import { onMounted } from '@vue/runtime-core';
import axios from 'axios';
import {useRouter} from 'vue-router'
import {user_hint ,user_amend,user_modelete} from '../../../utils/api'
var $router = useRouter();
var tableData = reactive({list:[]});

// 在挂载请求数据
onMounted(()=>{
  user_hint().then((res)=>{
        tableData.list = res.data.list;
        // 计算应补货量
    tableData.list.forEach((item)=>{
      item.replenish = item.maxamount - item.goodsamount;
    })
  })
});






// 编辑
var handleClick = (row) => {
  user_amend({query:row})
}
// 删除
var deleteRow =(row) =>{
  user_modelete({id:row.goodsid}).then((res)=>{
    console.log('delete',res.data);
    tableData.list = res.data.list;
    tableData.list = ''
    var arr = [];
    res.data.list.forEach((item) => {
        if (item.goodsamount < 20) {
            arr.push(item)
        } 
    });
    tableData.list = arr;
    // 计算应补货量
    tableData.list.forEach((item)=>{
      item.replenish = item.maxamount - item.goodsamount;
    })
    // 弹出删除成功提示
    ElMessage({
    message: '删除成功。',
    type: 'success',
  })
  })
}


</script>

<style>
.hint{
    position: relative;
}
.h2{
    color: red;
    margin: 20px 0 20px 0;
}
.icon{
  position: absolute;
  top: 20px;
  right: 650px;
  width: 100px;
  height: 100px; 
}
</style>